<template>
    <div class="memeber">
        <div class="member_top">
            <div style="display:flex;margin-left: 20px;align-items: center;">
                <h2 class="container_top_text">项目成员</h2>
                <!-- <div class="container_top_text_select">
                    <el-input style="width:200px" placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="queryInput" @keyup.enter.native="keyupenter"> </el-input>
                </div> -->
            </div>
            <div>
                <el-button class="ge_content_right_button" icon="el-icon-plus" @click="handleCommand">新增成员</el-button>
            </div>
        </div>
        <div class="member_conter">
            <div v-for="data in projuser" v-if="data.userList.length>0">
                <span>{{data.termName}}</span>
                <div class="member_conter_zong">
                    <div class="member_conter_item" v-for="item in data.userList" v-if="data.userList.length>0" v-cloak>
                        <div class="member_conter_item_top">
                            <div style="display:flex">
                                <img class="app_project_botton_avater_image" :src="item.avatar?item.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'" />
                                <div class="information">
                                    <span class="information_name">{{item.userName}}</span>
                                </div>
                            </div>
                            <div class="member_conter_item_top_icon" @click="delprojmember(item)">
                                <el-tooltip class="item" effect="dark" content="移出成员" placement="top">
                                    <i class="el-icon-circle-close"></i>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="member_conter_item_buttom">
                            <span>总任务：{{item.taskNum}}</span>
                            <span>完成任务：{{item.taskFinishNum}}</span>
                        </div>
                    </div>

                </div>

            </div>
            <!-- <div class="projectTask_data"  v-if="projuser.length<0" v-cloak>
		    暂无成员
	    </div> -->
        </div>
        <!-- <div class="bottom">
            <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="listclick" />

        </div> -->
        <el-dialog title="添加项目成员" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false'>
            <!-- <div class="member_add_text"> 添加成功后，对方将收到一条已加入项目的通知</div> -->
            <div class="member_add_div">从企业成员中选择</div>
            <selectRoleTwo :key="times" type='warehouse' selectType='singleChoice' style="width:100%" @selectsuccess='selectsuccess'></selectRoleTwo>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="projuserAdd">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
// import { getTreeData } from "@/api/termuser";
import pagination from "@/components/Pagination/index.vue";
import selectRoleTwo from "@/components/screen/selectRoleTwo";
import personInCharge from "@/components/condition/personInCharge.vue";
import { list, relationDel, save,getTreeData} from "@/api/projuser";
export default {
    components: {
        selectRoleTwo,
        personInCharge,
        pagination,
    },
    props: ["membershow"],
    data() {
        return {
            times:null,
            dialogVisible: false,
            queryInput: "",
            memberlist: "",
            current: 1,
            size: 20,
            total: 0,
            projuser: [],
            projuserId: "",
        };
    },
    created() {
        this.listclick();
        if (this.membershow == true) {
            this.dialogVisible = true;
        }
    },
    watch: {
        membershow(newval, oldval) {
            this.membershow == newval;
        },
    },
    mounted() {},
    methods: {
        keyupenter(e) {
            var keyCode = window.event ? e.keyCode : e.which;
            this.queryInput = e.target.value;
            if (keyCode == 13) {
                this.listclick();
            }
        },
        async projuserAdd() {
            let res = await save({
                projId: this.$route.query.id,
                userId: this.projuserId,
            });
             this.listclick();
            // this.projuser.splice(0, 0, res.data[0]);
            this.dialogVisible = false;
            this.times = new Date().getTime()
            if (this.membershow == true) {
                this.$emit("memberchange");
            }
        },
        listclick() {
            let params = new URLSearchParams();
            params.append("current", this.current);
            params.append("size", this.size);
            // params.append('userName',this.queryInput)
            params.append("projId", this.$route.query.id);
            getTreeData(params).then((res) => {
                this.projuser = res.data;
            });
            //  list(params).then(res=>{
            //      this.projuser=res.data.records
            //      this.total=res.data.total
            //  })
        },
        selectsuccess(data) {
            if (data.length > 0) {
                this.projuserId = data[0].userId;
            }
        },
        delprojmember(data) {
            console.log(data);
            let _this = this;
            this.$confirm("是否移出成员, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            })
                .then(() => {
                    let params = new URLSearchParams();
                    params.append("userId", data.userId);
                    params.append("projId", this.$route.query.id);
                    relationDel(params).then((res) => {
                         this.listclick();
                        // _this.projuser.forEach(function (item, index) {
                        //     if (item.userId == data.userId) {
                        //         _this.projuser.splice(index, 1);
                        //     }
                        // });
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    });
                })
                .catch(() => {});
        },
        handleCommand() {
            this.dialogVisible = true;
        },
        currentChange() {},
    },
};
</script>
 <style scoped>
.body {
    position: relative;
}
.memeber {
    width: 100%;
}
.member_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.container_top_text {
    margin: 0;
}
.container_top_text_select {
    margin-left: 15px;
}

.member_conter {
    width: 100%;
    padding-top: 14px;
    /* display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; */
    padding-left: 25px;
}
.member_conter_item {
    /* width: 30%; */
    width: 265px;
    min-width: 250px;
    padding: 14px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px 0px,
        rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 14px;
    margin-right: 20px;
}
.member_conter_item:hover {
    /* width: 30%; */
      width: 265px;
    padding: 14px;
    box-shadow: 1px 1px 5px #888888;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 14px;
}
.member_conter_item_top {
    display: flex;
    justify-content: space-between;
}
.app_project_botton_avater_image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
.information {
    margin-bottom: 5px;
    margin-left: 10px;
}
.information_name {
    color: rgb(46, 64, 94);
    font-size: 18px;
    display: block;
}
.information_type {
    height: 20px;
    color: rgb(222, 53, 11);
    font-size: 12px;
    border: 1px solid rgb(222, 53, 11);
    border-radius: 2px;
    padding: 2px 4px 3px 4px;
    margin-left: 5px;
}
.information_gang {
    color: rgb(144, 154, 170);
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
}
.member_conter_item_buttom {
    margin-top: 8px;
    color: rgb(46, 64, 94);
    font-size: 14px;
}
.member_conter_item_buttom span {
    margin-right: 16px;
}

.member_add_text {
    background-color: #fffae6;
    color: #2e405e;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
    text-align: center;
}
.member_add_div {
    font-size: 13px;
    font-weight: 700;
    color: rgb(46, 64, 94);
    margin-bottom: 10px;
}
.popover-content-top-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    text-align: center;
}
.popover-content-top-title:hover {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    text-align: center;
    background-color: rgb(249, 249, 249);
}
.bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.milepostselect_div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.avatar {
    border-radius: 50%;
    width: 25px;
}
.member_conter_item_top_icon {
    cursor: pointer;
    color: #2e405e;
}
.projectTask_data {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #909aaa;
    height: 200px;
    align-items: center;
}
[v-cloak] {
    display: none !important;
}
.member_conter_zong{

    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}
</style>
